<template>
  <div class="box">
    <!-- <router-link to="/" class="www">
      <div class="iconfont iconjiantou2"></div>
    </router-link>
    <div class="login">
      <router-link to="/login" class="www">前往登录</router-link>
    </div>-->
    <van-nav-bar
      title="用户注册"
      left-text="返回"
      right-text="前往登录"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <!-- <div class="register">注册账号</div> -->
    <div class="img">
      <img src="../assets/login2.jpg" />
    </div>
    <Input type="text" test="注册账号" runer="^\d{5,11}$" @InputBtn="setUserName" />
    <Input type="text" test="昵称" runer="^[\u4e00-\u9fa5]{2,11}$" @InputBtn="setNickName" />
    <Input type="password" test="密码" runer="^[a-zA-Z0-9]{3,11}$" @InputBtn="setPassWord" />
    <Btn text="注册" @Btn="register" :fy="flag" />
    <div class="deals">
      <label for="deal">
        <input type="checkbox" id="deal" v-model="flag" />
        勾选本条
        <span>霸王条约</span>
        ，才能完成注册
      </label>
    </div>
  </div>
</template>

<script>
// import Input from "../components/AutInput";
// import Btn from "../components/AutBtn";

export default {
  components: {
    Input: () => import("../components/AutInput"),
    Btn: () => import("../components/AutBtn")
  },
  data() {
    return {
      username: "",
      nickname: "",
      password: "",
      flag: true,
      usernameruner: "^\\d{5,11}$",
      passwordruner: "^[a-zA-Z0-9]{3,11}$",
      nicknameruner: "^[\\u4e00-\\u9fa5]{2,11}$"
    };
  },

  methods: {
    onClickLeft() {
      this.$router.replace({ name: "Home" });
    },
    onClickRight() {
      this.$router.replace({ name: "login" });
    },
    setUserName(username) {
      this.username = username;
    },
    setNickName(nickname) {
      this.nickname = nickname;
    },
    setPassWord(password) {
      this.password = password;
    },
    register() {
      if (!new RegExp(this.usernameruner).test(this.username)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码和昵称" });

        return;
      }
      if (!new RegExp(this.passwordruner).test(this.password)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码和昵称" });

        return;
      }
      if (!new RegExp(this.nicknameruner).test(this.nickname)) {
        this.$dialog.alert({ message: "请输入正确的账号、密码和昵称" });

        return;
      }

      this.$axios({
        url: "/register",
        method: "post",
        data: {
          username: this.username,
          password: this.password,
          nickname: this.nickname
        }
      })
        .then(res => {
          // console.log(res);
          if (res.data.message == "注册成功") {
            this.$dialog
              .confirm({
                title: "注册成功...",
                message: "是否前往登录？"
              })
              .then(() => {
                this.$router.replace({ name: "login" });
              })
              .catch(() => { });

            // console.log(res.data.message);
          } else {
            this.$dialog.alert({ message: "用户已存在，请重试！" });
          }
        })
        .catch(err => {
          this.$dialog.alert({
            message: "服务器请求出错，请重试"
          });
        });
      // console.log(this.username, this.nickname, this.password);
    }
  }
};
</script>
<style lang="less" scoped>
// .www {
//   text-decoration: none;
// }
.box {
  margin-bottom: 40px;
  background-color: #fff;
  // height: 450px;
  width: 320px;
  margin: 20px auto;
  border-radius: 10.001px;
  position: relative;
  /deep/ .van-nav-bar {
    height: 13.889vw;
  }
  /deep/ .van-nav-bar__left {
    font-size: 3.333vw;
  }
  /deep/ .van-nav-bar__right {
    font-size: 3.333vw;
  }
  /deep/ .van-nav-bar__title {
    font-size: 4.444vw;
  }
}
.img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  margin-top: 29.999px;
  // margin-bottom: 40px;

  // border: 1.001px solid;
  border-radius: 50%;
  overflow: hidden;
}
img {
  width: 100%;
}
// .register {
//   font-size: 14px;
//   text-align: center;
//   margin: 20.002px;
// }
// .login {
//   right: 20.002px;
//   top: 20.002px;
//   font-size: 7.999px;
//   position: absolute;
// }
// .iconjiantou2 {
//   font-size: 15.998px;
//   padding: 20.002px 0 0 20.002px;
//   //   position: absolute;
// }
.name p {
  font-size: 12px;
}

.name {
  text-align: center;
  padding: 6.998px;
}
.deals {
  text-align: center;
  color: rgb(199, 180, 180);
  font-size: 12px;
  span {
    color: red;
    font-size: 16px;
  }
}
</style>
